import React, { useEffect, useRef, useState } from 'react'
import { useStore } from 'react-redux'
import { DeleteOutlined, EditOutlined, UploadOutlined } from '@ant-design/icons'
import http from '../../api'
import { Space, Table, Popconfirm, notification, Button, message } from 'antd'
import { useHistory } from 'react-router-dom'

export default function NewsDraft() {
    const [draftList, setDraftList] = useState([])//草稿列表
    const [newsClassify, setNewsClassify] = useState([])
    const { UserInfo } = useStore().getState()
    const history = useHistory()


    const editDraft = (record) => {
        history.push('/news-manage/add', record)
    }

    //编辑打开详情
    const viewDraft = (record) => {
        //嵌套子路由跳转不使用绝对路径
        history.push(`preview/${record.id}`, record)
    }

    // 提交审核
    const handleCheck = (id) => {
        http.patch(`/news/${id}`, {
            auditState: 1
        }).then(res => {
            history.push('/audit-manage/list')
            notification.info({
                message: '提交审核成功',
                description: `您可以到【审核管理/审核列表】中查看您的新闻`,
                placement: 'bottomRight'
            })
        })
    }

    const column = [
        {
            title: 'ID',
            key: 'id',
            dataIndex: 'id',
        },
        {
            title: '新闻标题',
            key: 'title',
            render: (_, item) => (
                <span style={{ color: "#1890ff" }} onClick={() => viewDraft(item)}>{item.title}</span>
            )
        },
        {
            title: '作者',
            dataIndex: 'author',
            key: 'author',
        },
        {
            title: '新闻分类',
            key: 'categoryId',
            render: (_, item) => (
                <span>{newsClassify.length > 0 ? newsClassify.find(classItem => classItem.id == item.categoryId).title : ''}</span>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Popconfirm title="确定要删除么？" okText="确认" cancelText="取消" onConfirm={() => onConfirmDel(record)}>
                        <DeleteOutlined style={{ color: 'red', marginRight: '10px' }} />
                    </Popconfirm>
                    <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => editDraft(record)} />
                    <Button type="primary" shape="circle" icon={<UploadOutlined />} onClick={() => handleCheck(record.id)} />
                </Space>
            ),
        },
    ]

    useEffect(() => {
        getTableList()
        getNewsClassify()
    }, [])

    //删除草稿
    const onConfirmDel = (item) => {
        http.delete(`/news/${item.id}`).then(res => {
            message.success('删除成功')
            getTableList()
        })
    }


    //获取草稿列表
    const getTableList = () => {
        http.get(`/news?author=${UserInfo.username}&auditState=0`).then(res => {
            setDraftList(res.data)
        })
    }

    //获取新闻分类信息
    const getNewsClassify = () => {
        http.get('/categories').then(res => {
            setNewsClassify(res.data)
        })
    }

    return (
        <div>
            <h1>草稿箱</h1>
            <Table columns={column} dataSource={draftList} pagination={{ pageSize: 5 }} rowKey={(item) => item.id} />;
        </div>
    )
}
